.demo{
    width: 100%;
    height:100%;
    background-color: #8bc01f;
  .conteiner{
            margin:auto;
            width:70%;
            display: flex;
            // justify-content: space-between;
            justify-content: center;
        .dic{
        width:40%;
        padding-top:74px;
        // padding-left: 235px;

            .a{
                color:#fff;
                span{
                    display:inline-block;
                    width:13%;
                    border:0px solid #fff;
                    background-color: #fff;
                    color:#8bc01f;
                    text-align: center;
                    border-radius: 10%;
                    font-weight: bold;
                    font-size: 3em;
                }
                .q{
                    display:inline-block;
                    font-size:4em;
                }

                }
            
                .b{
                    color:#fff;
                    font-size:1.7em;
                    margin-top:1%;
                }
                .c{
                    color:#fff;
                    line-height: 30px;
                    margin-top:4%;
                }
                .d{
                    color:#fff;
                    line-height: 30px;
                    margin-top:2%;
                }
                .e{
                    color:#fff;
                    margin-top:2%;
                }
                .f{
                    margin-top:2%;
                    width:18%;
                    border:1px solid #fff;
                    background-color: #fff;
                    color:#8bc01f;
                    border-radius:10%;
                    height:2.3em;
                    text-align: center;
                    padding-top: .5%;
                    transition: all 0.2s linear;
                    margin-bottom: 70%;
                   &:hover{
                    transform: translateY(-4px);
                    box-shadow: 0px 0px 5px 2px #888;
               
                  }   
                }
            }
            .outer{
                margin-top: 6%;
            }
        }

        @media screen and(max-width:1174px){

            .conteiner{
                
                .dic{
                    font-size: 60%;
                    .f{
                     width:40%;
                     height:4em;
                   }
                }
            }
            .outer img {
                width: 85%;
            }
        }
    }   
    @media screen and(max-width:850px){
        .conteiner{ 
                .dic{
                    font-size: 80%;
                    width: 100%;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    .f{
                        margin-left:30%;
                    }
                     }
            .outer img {
               display: none;
                        }
                    }
                }
     @media screen and(max-width:660px){
                .conteiner{
                    .dic{
                        .a{
                            span{
                                margin-left: 0px;
                            }
                        }
                        .f{
                            width:100px;
                        }
                   }
                }
            }
    
.demo2{
    width: 100%;
    height:100%;
    background-color: #3393df;
    .conteiner{
              width: 60%;
              margin: auto;
        .itme{
            padding-top: 7%;
       
              span{
                margin-left: 3%;
                margin-top: 4%;
                width:5%;
                border: 1px solid #fff;
                background-color: #fff;
                border-radius: 10%;
                font-weight: bold;
                font-size: 3em;
                display:inline-block;
                color:#3393df;
                text-align: center;  }


                .q{
                    display: inline-block;
                    font-size: 4em;
                    color: #fff;
            }

        }
        .line{
            display: flex;
            justify-content: center;
            align-items: center;
            justify-content: space-evenly;

        .box {
            width: 30%;
        }
        .box2{ 
            width: 33.3%;
            .box2_1{
                .box2_2{
                    color:#fff;
                    font-size: 2em;
                }
                .box2_3{
                    color:#fff;
                    line-height:2em;
                }
                .box2_4{
                    color:#fff;
                    font-size: 2em;
                    margin-top: 10%;
                }
                .box2_5{
                    color:#fff;
                    line-height:2em;
                    margin-bottom: 90%;
                }
            }
        }
        
        .box3 img{
            width:80%;
            margin-top:100%;
          }
        }
    }
}
@media screen and(max-width:1417px)
{
    .itme{
        font-size:0.7em;
    }
    .conteiner{
        .line{
            font-size: 100%;
        }
    }
}
@media screen and(max-width:1160px)
{
    .itme{
        font-size:0.5em;
        margin-left: 30%;
    }
    .conteiner{
        .line{
            font-size: 69%;
            width: 110%;
        }
    }
    
}
@media screen and(max-width:990px){
    .line{
        .box{
            display: none;
        }
        .box3{
            display: none;
        }
    // .box3{
    //             width: 35%;
    // }  
    .line{
        
            .box2{
                text-align: center; 
                margin-left: 35%;
                text-align: center;
                margin-left: 20%;
                }
            }

}
@media screen and(max-width:850px){
    .conteiner{ 
        .itme{ 
            
            margin-left: 60%;
                    width: 105%;  
      
            
        }
      
          
        }
}
}   

.demo3{
    width: 100%;
    height:100%;
    background-color: #fff;
   
    .coteiner{
            width: 100%;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;

            .ete{
                padding-top: 8%;
                width: 31%;
                .ale{ 
                    font-size: 4em;
                        span{
                            display:inline-block;
                            color:#fff;
                            width:10%;
                            height:1.3em;
                            text-align: center;
                            background-color:#3393df;
                            border-radius: 10%;
                        }
                        .q{
                            color:#3393df;
                            display:inline-block;
                        }
                    }

                .kk{
                        padding-top: 1%;
                        font-size:1.4em;
                        color:#000;
                }
                .kk2{
                    color:#3393df;
                    font-size:1.4em;
                    padding-top: 1%;
                }
                .kk3{
                    color: #848484;
                    padding-top: 1%;
                    text-indent: 2em;
                }
                .kk4{
                    color:#3393df;
                    font-size:1.4em;
                    padding-top: 1%;
                }
                .kk5{
                    color: #848484;
                    padding-top: 1%;
                    text-indent: 2em;
                }
                .kk6{
                    color:#3393df;
                    font-size:1.4em;
                    padding-top: 1%;
                }
                .kk7{
                    color: #848484;
                    padding-top: 1%;
                    text-indent: 2em;
                }
                .kk8 img{
                   margin-left:20%;
                   padding-top:4%;
                }
            }
            .ete2{
                width: 31%;
                padding-top: 8%;
                .qwe{
                    font-size: 4em;
                    span{
                        display:inline-block;
                        color:#fff;
                        width:12%;
                        height:1.3em;
                        text-align: center;
                        background-color:#3393df;
                        border-radius: 10%;
                    }
                    .q{
                    color:#3393df;
                    display:inline-block;
                }
            
            }

            }
            
            .jj{
                padding-top: 1%;
                font-size:1.4em;
                color:#000;
        }
        .jj2{
            color:#3393df;
            font-size:1.4em;
            padding-top: 2%;
        }
        .jj3{
            color: #848484;
            padding-top: 4%;
            text-indent: 2em;
        }
        .jj4{
            color:#3393df;
            font-size:1.4em;
            padding-top: 7%;
        }
        .jj5{
            color: #848484;
            padding-top: 1%;
            text-indent: 2em;
        }
        .jj6{
            color:#3393df;
            font-size:1.4em;
            padding-top: 1%;
        }
        .jj7{
            color: #848484;
            padding-top: 1%;
            text-indent: 2em;
        }
        .jj8 img{
           margin-left:20%;
           padding-top:4%;
        }
    }
 
}
@media screen and(max-width:1038px){
    .coteiner{

        .ete{
             font-size: 50%;
            width: 45%;
            padding-bottom:2% ;
            
            .kk8 img{
                visibility: hidden;
             }
             
        }
        .ete2{ 
            width: 45%;
            font-size: 50%;
            .jj8 img{
                visibility: hidden;
            }
        }

    }     
}
.demo4{
        width: 100%;
        height:100%;
        background-color: #f7f7f7 ;
      
    .coteiner{
                width: 100%;
                display: block;
                display: flex;
                // flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                .tey{
                    padding-top: 8%;
                    width: 31%;
                    .vie{ 
                        font-size: 4em;
                            span{
                                display:inline-block;
                                color:#fff;
                                width:10%;
                                height:1.3em;
                                text-align: center;
                                background-color:#3393df;
                                border-radius: 10%;
                            }
                            .v{
                                color:#3393df;
                                display:inline-block;
                            }
                        }
    
                    .yy{
                            padding-top: 1%;
                            font-size:1.4em;
                            color:#000;
                    }
                    .yy2{
                        color:#3393df;
                        font-size:1.4em;
                        padding-top: 1%;
                    }
                    .yy3{
                        color: #848484;
                        padding-top: 1%;
                        text-indent: 2em;
                    }
                    .yy4{
                        color:#3393df;
                        font-size:1.4em;
                        padding-top: 1%;
                    }
                    .yy5{
                        color: #848484;
                        padding-top: 1%;
                        text-indent: 2em;
                    }

                    .yy6 img{
                       margin-left:20%;
                       padding-top:4%;
                    }
                }

                .we{
                    padding-top: 6%;
                    width: 31%;
                    .xi{ 
                        font-size: 4em;
                            span{
                                display:inline-block;
                                color:#fff;
                                width:10%;
                                height:1.3em;
                                text-align: center;
                                background-color:#3393df;
                                border-radius: 10%;
                            }
                            .v{
                                color:#3393df;
                                display:inline-block;
                            }
                        }
    
                    .bb{
                            padding-top: 1%;
                            font-size:1.4em;
                            color:#000;
                    }
                    .bb2{
                        color:#3393df;
                        font-size:1.4em;
                        padding-top: 1%;
                    }
                    .bb3{
                        color: #848484;
                        padding-top: 1%;
                        text-indent: 2em;
                    }
                    .bb4{
                        color:#3393df;
                        font-size:1.4em;
                        padding-top: 1%;
                    }
                    .bb5{
                        color: #848484;
                        padding-top: 1%;
                        text-indent: 2em;
                    }
         
                    .bb6 img{
                       margin-left:20%;
                       padding-top:4%;
                    }
                }
                
        }
     
    
}  
@media screen and(max-width:1305px)
{
    .coteiner{
        font-size:0.5em;
    
    .we{
        padding-top: 5.5em;
        
    }
}
.key{
    padding-top: 2em;
}
}
@media screen and(max-width:1038px){
    .coteiner{
        .tey{
            .yy6{
            visibility: hidden;
        }
        }
        .we{
            margin-bottom: 5em;
            .bb6{
                visibility: hidden;
            }
        }
    }
}
@media screen and(max-width:600px){
    .coteiner{
        .tey{
            .vie{
                display: flex;
                flex-direction: column;
                .v{
                    margin-left: 10px;
                }
                span{
                margin-left: 58px;
                width: 20px;
            margin-bottom: 4%;}
            }
        }
        .we{
            .xi{
                span{
                        margin-left: 71px;
                }
            }
        }
    }
}


.demo5{
    width:100%;
    border:1px solid #3b3b3b;
    background-color:#3b3b3b; 
    color: #888;
  
    .coteiner{
        align-items: center;
         display: flex;
         width: 100%;
         padding:2em 0;
         align-items: center;
         justify-content: space-around;
         .nn{
             .jj5{
                 display: flex;
                 .jj{
                     width:20%;
                 }
                 .jj2{
                        width:20%;
                 }
                
             }
         }
         .nn2{
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
    }
}